<template>
  <div class="menu">
    <!-- 球衣菜单-->
    <div class="jerseyMenu">
      <div class="title">
        <div></div>
        <span>NBA球衣</span>
      </div>
      <div class="carousel">
        <el-carousel :interval="6000" height="320px" :autoplay="true">
          <el-carousel-item v-for="item in 1" :key="item">
            <!--   @click="itemSelect(pic)" -->
            <div v-for="(pic, index) in NbaJerseyList" :key="index">
              <img
                ref="image"
                :src="pic.imagePath"
                @load="picLoadedHandler(pic)"
              />
              <div
                class="introduction"
                :style="{ backgroundColor: pic.bgColor, color: pic.fontColor }"
              >
                {{ pic.name }}
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 地板菜单 -->
    <div class="courtMenu">
      <div class="title">
        <div></div>
        <span>NBA地板</span>
      </div>
      <div class="carousel">
        <el-carousel
          :interval="3000"
          type="card"
          height="320px"
          :autoplay="true"
        >
          <el-carousel-item
            v-for="(pic, index) in NbaCourtList"
            :key="index"
            @click="itemSelect(pic)"
          >
            <img :src="pic.imagePath" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 街头菜单 -->
    <div class="courtMenu">
      <div class="title">
        <div></div>
        <span>街头球场</span>
      </div>
      <div class="carousel">
        <el-carousel
          :interval="3000"
          type="card"
          height="320px"
          :autoplay="true"
        >
          <el-carousel-item
            v-for="(pic, index) in blackTopList"
            :key="index"
            @click="itemSelect(pic)"
          >
            <img :src="pic.imagePath" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
  
<script>
/*eslint-disable*/
import { getCurrentInstance, onMounted } from "vue";
import pubsub from "pubsub-js";
import { ElMessage } from "element-plus";

import mainApi from "@/api/mainApi";
import imgApi from "@/api/imgApi";

export default {
  name: "menu",
  data() {
    return {
      NbaJerseyList: [],
      NbaCourtList: [],
      blackTopList: [],
      picLength: 6,
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();

    onMounted(() => {
      // 开启加载
      pubsub.publish("pageLoading", true);
      readData();
    });

    // 读取mod数据
    function readData() {
      readNbaJersey();
      readNbaCourt();
      readBlacktop();
    }

    // 读取nba球衣
    function readNbaJersey() {
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        // 遍历文件路径
        traverseDirectory(
          window.myApi.path.join(data.fileHouse, "/jersey"),
          (data) => {
            proxy.NbaJerseyList.push(data);
          }
        );
      });
    }

    // 读取nba地板
    function readNbaCourt() {
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        // 遍历文件路径
        traverseDirectory(
          window.myApi.path.join(data.fileHouse, "/court"),
          (data) => {
            proxy.NbaCourtList.push(data);
          }
        );
      });
    }

    // 读取街头球场
    function readBlacktop() {
      // 读取文件仓库中的文件
      mainApi.readJson(ElMessage, (data) => {
        // 遍历文件路径
        traverseDirectory(
          window.myApi.path.join(data.fileHouse, "/blacktop"),
          (data) => {
            proxy.blackTopList.push(data);
          }
        );
      });
    }

    // 文件读取
    function traverseDirectory(folderPath, fun) {
      let fs = window.myApi.fs;
      let path = window.myApi.path;

      if (!fs.existsSync(folderPath)) {
        console.log("文件夹不存在:", folderPath);
        return;
      }

      let files;
      try {
        // 读取文件夹内容
        files = fs.readdirSync(folderPath);
      } catch (error) {}

      // console.log(files);

      // 生成随机mod列表
      var randomfiles = generateSixRandomNumbers(files);
      // console.log(randomfiles);

      // 遍历文件夹内容
      randomfiles.forEach((file) => {
        let fullPath = path.join(folderPath, file, "preview");
        // 图片路径
        fullPath = path.join(fullPath, fs.readdirSync(fullPath)[0]);
        mainApi.writeDailyLog("图片读取路径:" + fullPath + "--modMenu.vue");
        // mod名称
        let name = file.split(" ")[1].split("$")[0];;

        // mod类型
        let type = mainApi.TypeDistinction(fullPath);

        // 读取图片为base64
        fs.readFile(fullPath, { encoding: "base64" }, (err, imageData) => {
          if (err) {
            ElMessage({
              message: `[${file}]图片读取失败`,
              type: "error",
              duration: 10000,
            });
            mainApi.writeDailyLog(
              ` ${file}图片读取失败:` + fullPath + "--modMenu.vue"
            );
            throw err;
          }

          // 载入内容
          fun({
            imagePath: `data:image/jpeg;base64,${imageData}`,
            folderPath: path.join(folderPath, file),
            name,
            type,
            file,
          });
        });
      });
    }

    // mod选择
    function itemSelect(data) {
      let routerData = {
        contentName: data.file,
        contentAuthor: data.folderPath.split(" ")[2],
        contentType: data.type,
        targetComponent: "detail",
        startComponent: "home",
      };
      console.log(routerData);
      mainApi.writeDailyLog("mod选择:" + data.folderPath + "--detail.vue");
      pubsub.publish("routerChange", routerData);
    }

    // 产生随机数
    function generateSixRandomNumbers(files) {
      let n = files.length;

      if (n <= proxy.picLength) {
        return files;
      }

      var randomNumbers = [];
      while (randomNumbers.length < proxy.picLength) {
        var randomNumber = Math.floor(Math.random() * (n - 1)) + 1;
        if (randomNumbers.indexOf(randomNumber) === -1) {
          randomNumbers.push(files[randomNumber]);
        }
      }
      return randomNumbers;
    }

    return {
      itemSelect,
    };
  },
  methods: {
    picLoadedHandler(pic) {
      const image = this.$refs.image[this.NbaJerseyList.indexOf(pic)];
      new Promise((res, rej) => {
        imgApi.extractbgColor(image, pic);
        res();
      }).then(() => {
        // 加载完成后关闭加载页面
        if (this.NbaJerseyList.indexOf(pic) + 1 === this.picLength) {
          mainApi.writeDailyLog("preload渲染完成" + "--detail.vue");
          pubsub.publish("pageLoading", false);
        }
      });
    },
  },
};
</script>
  
  <style lang="less" scoped>
@import "../less/variables.less";
.menu {
  width: 1225px !important;
  margin: 0 auto;
  margin-top: 1%;
  > .courtMenu {
    > .carousel {
      .el-carousel__item {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 5px;
        width: @courtWidth;
        height: @courtHeight;
        padding: 5px;
        box-shadow: 2px 2px 2px 1.5px rgba(0, 0, 0, 0.2);
        > img {
          opacity: 0.8;
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          border-radius: 5px;
        }
      }

      .el-carousel__item--card.is-active {
        > img {
          opacity: 1;
        }
      }
    }
  }
  > .jerseyMenu {
    > .carousel {
      .el-carousel__item {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        > div {
          box-shadow: 2px 2px 2px 0.5px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          margin: 0 1%;
          width: @jerseyWidth;
          height: @jerseyHeight;
          display: flex;
          justify-content: center;
          background-color: #fff;
          overflow: hidden;
          position: relative;
          > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }
          > .introduction {
            background-color: antiquewhite;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 120%;
            font-weight: bold;
            position: absolute;
            top: @modNameTop;
            height: @modNameHeight;
            width: @jerseyWidth;
            white-space: nowrap;
          }
        }
        > div:first-child {
          margin-left: 0;
        }
        > div:last-child {
          margin-right: 0.5%;
        }
        > div:hover {
          > img {
            width: 110%;
          }
        }
      }

      .el-carousel__item--card.is-active {
        box-shadow: 2px 2px 2px 0.5px rgba(0, 0, 0, 0.2);
        > img {
          opacity: 1;
        }
      }
    }
  }
}

.title {
  display: flex;
  align-items: center;
  > div {
    background-color: @red;
    height: 22px;
    width: 5px;
    border-radius: 7px;
  }
  > span {
    padding-left: 0.5%;
    font-weight: bold;
    font-size: 110%;
  }
}
</style>